<template>
  <div class="search">
    <van-nav-bar
      title="商品搜索"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <van-search
      v-model="keyword"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch(keyword)" class="search-btn">搜索</div>
      </template>
    </van-search>

    <div class="search-history" v-show="record.length > 0">
      <div class="title">
        <span>最近搜索</span>
        <van-icon name="delete-o" size="18" @click="clearRecord"/>
      </div>
      <div class="list">
        <div class="van-ellipsis"
             @click="onSearch(value)"
             v-for="value in record" :key="value" v-text="value">
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { mapMutations, mapState } from 'vuex'

export default {
  name: 'SearchIndex',
  data () {
    return {
      keyword: ''
    }
  },
  computed: {
    ...mapState('searchRecord', ['record'])
  },
  methods: {
    onSearch (keyword) {
      this.addSearchRecord(keyword)
      this.$router.push({
        path: '/goodsList',
        query: { goodsName: keyword }
      })
    },
    ...mapMutations('searchRecord', ['addSearchRecord', 'clearRecord'])
  }
}
</script>

<style lang="less" scoped>
@grid-item-content-padding: 8px 8px;
.search {
  background: #fff;

  .van-search__action {
    padding: 0 1em 0 0;
  }

  .search-btn {
    color: #fff;
    background: #f03c3c;
    padding: 0 25px;
  }

  .search-history {
    padding: 10px 10px 0;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
    }

    .list {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      div {
        width: 90px;
        line-height: 40px;
        text-align: center;
        background: #f7f8fa;
        margin: 5px;
      }
    }
  }

  //.van-grid-item__content {
  //  padding: 8px 16px;
  //}
}
</style>
